﻿<Window x:Class="MeridianZ.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Properties="clr-namespace:MeridianZ.Properties"
        Title="Meridian Zero beta" Height="600" Width="800" MinWidth="400"
        SourceInitialized="WindowSourceInitialized" SizeChanged="WindowSizeChanged" LocationChanged="WindowLocationChanged" Closing="WindowClosing">
    <Window.TaskbarItemInfo>
        <TaskbarItemInfo x:Name="Taskbar">
            <TaskbarItemInfo.ThumbButtonInfos>
                <ThumbButtonInfo x:Name="ThumbShuffleButton" IsEnabled="{Binding IsLoaded}" ImageSource="/MeridianZ;component/Resources/Images/shuffle_disabled_icon_thumb.png" Click="ThumbShuffleButtonClick"/>
                <ThumbButtonInfo x:Name="ThumbPrevButton" IsEnabled="{Binding IsLoaded}" ImageSource="/MeridianZ;component/Resources/Images/prev_thumb.png" Click="ThumbPrevButtonClick"/>
                <ThumbButtonInfo x:Name="ThumbPlayButton" IsEnabled="{Binding IsLoaded}" ImageSource="/MeridianZ;component/Resources/Images/play_thumb.png" Click="ThumbPlayButtonClick"/>
                <ThumbButtonInfo x:Name="ThumbNextButton" IsEnabled="{Binding IsLoaded}" ImageSource="/MeridianZ;component/Resources/Images/next_thumb.png" Click="ThumbNextButtonClick"/>
                <ThumbButtonInfo x:Name="ThumbLikeButton" IsEnabled="False" ImageSource="/MeridianZ;component/Resources/Images/fav_icon_thumb.png" Click="ThumbLikeButtonClick"/>
            </TaskbarItemInfo.ThumbButtonInfos>
        </TaskbarItemInfo>
    </Window.TaskbarItemInfo>
    <Window.Resources>
        <Storyboard x:Key="ExpandSearchBoxAnim">
            <DoubleAnimation Storyboard.TargetName="SearchBox" Storyboard.TargetProperty="Width" To="300" Duration="0:0:0.25" AccelerationRatio="0.3"/>
        </Storyboard>
        <Storyboard x:Key="CollapseSearchBoxAnim">
            <DoubleAnimation Storyboard.TargetName="SearchBox" Storyboard.TargetProperty="Width" To="150" Duration="0:0:0.25" DecelerationRatio="0.3"/>
        </Storyboard>
        <Storyboard x:Key="FadeInSearchResultsAnim">
            <DoubleAnimation Storyboard.TargetName="SearchList" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.15" AccelerationRatio="0.3"/>
            <ThicknessAnimation Storyboard.TargetName="SearchList" Storyboard.TargetProperty="Margin" From="0,0,0,300" To="0" Duration="0:0:0.15" AccelerationRatio="0.3"/>
        </Storyboard>
        <Storyboard x:Key="FadeOutSearchResultsAnim">
            <DoubleAnimation Storyboard.TargetName="SearchList" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.15" DecelerationRatio="0.3"/>
            <ThicknessAnimation Storyboard.TargetName="SearchList" Storyboard.TargetProperty="Margin" To="0,0,0,300" Duration="0:0:0.15" DecelerationRatio="0.3"/>
        </Storyboard>
    </Window.Resources>
    <Grid Name="RootGrid">
        <Rectangle>
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.5,1" Center="0.5,1" RadiusY="1">
                    <GradientStop Color="#202020" Offset="1"/>
                    <GradientStop Color="#383838"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <MediaElement Name="MediaElement" Visibility="Collapsed" LoadedBehavior="Manual"/>
        <Grid Name="TopBar" VerticalAlignment="Top" Height="38">
            <Rectangle>
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/Resources/Images/checkers.png" TileMode="Tile" Viewport="0,0,5,4" ViewportUnits="Absolute"/>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Opacity="0.9">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                        <GradientStop Color="#FF0D0D0D" Offset="1"/>
                        <GradientStop Color="#FF3A3A3A"/>
                        <GradientStop Color="#FF3C3C3C" Offset="0.5"/>
                        <GradientStop Color="#FF171717" Offset="0.5"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Opacity="0.35">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                        <GradientStop Color="#000D0D0D" Offset="0.5"/>
                        <GradientStop Color="White"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Opacity="0.15">
                <Rectangle.Fill>
                    <RadialGradientBrush Center="0.5,1" GradientOrigin="0.5,1" RadiusY="0.7">
                        <GradientStop Color="#00000000" Offset="1"/>
                        <GradientStop Color="White"/>
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <ProgressBar Foreground="White" IsIndeterminate="{Binding IsLoading}" Visibility="{Binding IsLoading, Converter={StaticResource VisibilityConverter}, ConverterParameter=Visible}" Style="{StaticResource ZeroProgressBarStyle}">
                <ProgressBar.OpacityMask>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="#00000000" Offset="0"/>
                        <GradientStop Color="#00000000" Offset="0.3"/>
                        <GradientStop Color="#FF000000" Offset="0.5"/>
                        <GradientStop Color="#00000000" Offset="0.7"/>
                        <GradientStop Color="#00000000" Offset="1"/>
                    </LinearGradientBrush>
                </ProgressBar.OpacityMask>
            </ProgressBar>
            <StackPanel Margin="0,0,5,0" Orientation="Horizontal" HorizontalAlignment="Right">
                <Grid DockPanel.Dock="Top" Margin="10,7,20,7">
                    <TextBox Name="SearchBox" Text="{x:Static Properties:Resources.Search}" Width="150" Padding="4,1,25,0" HorizontalAlignment="Stretch" Style="{StaticResource MetroTextBoxStyle}"
                         FontSize="14" KeyDown="SearchBoxKeyDown" GotFocus="SearchBoxGotFocus" LostFocus="SearchBoxLostFocus"/>
                    <Image Name="SearchIcon" Source="/Resources/Images/search_icon.png" Width="14" Margin="5,5,10,5" HorizontalAlignment="Right" MouseLeftButtonUp="SearchIconMouseLeftButtonUp"/>
                </Grid>
                <Grid>
                    <Image Source="/Resources/Images/userpic_frame.png"/>
                    <Rectangle RadiusX="3" RadiusY="3" Margin="2">
                        <Rectangle.Fill>
                            <ImageBrush ImageSource="{Binding UserPicture}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
                <StackPanel Margin="5,0,0,0">
                    <TextBlock Name="UsernameTextBlock" Text="{Binding UserName}" HorizontalAlignment="Right" FontSize="14" FontWeight="Medium" Foreground="White"/>
                    <TextBlock  Text="{Binding UserLastName}" HorizontalAlignment="Right" FontSize="12" FontWeight="Light" Foreground="White"/>
                </StackPanel>
            </StackPanel>
            <TextBlock Text="{x:Static Properties:Resources.MyAudio}" FontSize="18" Margin="10,5,0,5" Foreground="White" HorizontalAlignment="Left">
                <TextBlock.Effect>
                    <DropShadowEffect ShadowDepth="1" />
                </TextBlock.Effect>
            </TextBlock>
        </Grid>

        <Grid Margin="0,38,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="0"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <ListBox Name="MyAudioList" Grid.Row="2"  ItemTemplate="{StaticResource MyAudioItemTemplate}" ItemContainerStyle="{StaticResource MetroListboxItemStyle}" HorizontalContentAlignment="Stretch" 
                     ItemsSource="{Binding MyAudio}" BorderThickness="0" ScrollViewer.ScrollChanged="MyAudioListScrollChanged" SelectionChanged="MyAudioListSelectionChanged">
                <ListBox.ContextMenu>
                    <ContextMenu>
                        <ContextMenu.Items>
                            <MenuItem Name="RemoveItem" Header="{x:Static Properties:Resources.RemoveItem}" Click="RemoveItemClick"/>
                        </ContextMenu.Items>
                    </ContextMenu>
                </ListBox.ContextMenu>
            </ListBox>
            <Rectangle Grid.Column="1" Grid.Row="2" Opacity="0.4">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="Black"/>
                        <GradientStop Color="#00000000" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <ListBox Opacity="0" Grid.Column="2" Name="SearchList" Grid.Row="2" ItemTemplate="{StaticResource SearchAudioItemTemplate}" ItemContainerStyle="{StaticResource MetroListboxItemStyle}" HorizontalContentAlignment="Stretch" 
                     ItemsSource="{Binding SearchResults}" BorderThickness="0" ScrollViewer.ScrollChanged="SearchListScrollChanged" SelectionChanged="SearchListSelectionChanged">
                <ListBox.ContextMenu>
                    <ContextMenu>
                        <ContextMenu.Items>
                            <MenuItem Name="AddItem" Header="{x:Static Properties:Resources.AddItem}" Click="AddItemClick"/>
                        </ContextMenu.Items>
                    </ContextMenu>
                </ListBox.ContextMenu>
            </ListBox>
            <Grid Name="BottomBar" Grid.ColumnSpan="3" Grid.Row="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Rectangle Opacity="0.1" Grid.ColumnSpan="3">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="/Resources/Images/checkers.png" TileMode="Tile" Viewport="0,0,5,4" ViewportUnits="Absolute" />
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle Opacity="0.55" Grid.ColumnSpan="3">
                    <Rectangle.Fill>
                        <RadialGradientBrush RadiusY="2" RadiusX="2" Center="0.5,-0.5" GradientOrigin="0.5,-0.2">
                            <GradientStop Color="#000D0D0D" Offset="0.5"/>
                            <GradientStop Color="White"/>
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle Fill="#3f3f3f" Height="1" VerticalAlignment="Top" Grid.ColumnSpan="3"/>
                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Name="PrevButton" Grid.Column="1" Template="{StaticResource Prev}" Width="52" IsEnabled="{Binding IsLoaded}" Click="PrevButtonClick"/>
                    <ToggleButton Name="PlayPauseButton" Grid.Column="2" Template="{StaticResource PlayPause}" Width="63" IsEnabled="{Binding IsLoaded}" Click="PlayPauseButtonClick"/>
                    <Button Name="NextButton" Grid.Column="3" Template="{StaticResource Next}" Width="52" IsEnabled="{Binding IsLoaded}" Click="NextButtonClick"/>
                </StackPanel>
                <Grid VerticalAlignment="Center" Margin="20,0,20,0">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="14"/>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <DockPanel>
                        <ToggleButton Name="FavButton" DockPanel.Dock="Right" Template="{StaticResource Favourite}" Width="14" Cursor="Hand" IsEnabled="False" Click="FavButtonClick"  Checked="FavButtonChecked" Unchecked="FavButtonUnchecked"/>
                        <TextBlock Name="PlayingTitle" FontSize="12" VerticalAlignment="Center" Foreground="Gray" TextTrimming="CharacterEllipsis" Margin="0,0,5,0"/>
                    </DockPanel>
                    <Slider Grid.Row="1" Name="ProgressSlider" IsEnabled="{Binding IsLoaded}" Style="{StaticResource MetroSlider}" IsMoveToPointEnabled="True" Foreground="#FF42668C" Background="LightGray"/>
                    <TextBlock Grid.Row="2" Name="EstimatedTime" Text="0:00" FontSize="12" HorizontalAlignment="Left" Foreground="Gray"/>
                    <TextBlock Grid.Row="2" Name="LeftTime" Text="0:00" FontSize="12" HorizontalAlignment="Right" Foreground="Gray"/>
                </Grid>
                <DockPanel Grid.Column="3" Width="200" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,20,0">
                    <ToggleButton Name="ShuffleButton" Grid.Column="0" Template="{StaticResource Shuffle}" Width="22" Height="22" IsEnabled="{Binding IsLoaded}" Margin="0,0,20,0" Checked="ShuffleButtonChecked" Unchecked="ShuffleButtonUnchecked"/>
                    <Image Source="/Resources/Images/volume_icon.png" Width="15" Opacity="0.6"/>
                    <TextBlock Text="{Binding ElementName=VolumeSlider, Path=Value, Mode=OneWay, StringFormat=N0}" DockPanel.Dock="Right" Width="22" Foreground="Gray"/>
                    <Slider Name="VolumeSlider" Style="{StaticResource MetroSlider}" IsMoveToPointEnabled="True" Foreground="#FF42668C" Background="LightGray" Value="100" Maximum="100"
                                Margin="3,0,3,0" ValueChanged="VolumeSliderValueChanged"/>
                </DockPanel>
            </Grid>
        </Grid>
    </Grid>
</Window>
